<script>
import { gsap,} from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default{
    data(){
        return {
            // filt:0,
            introduce:"这",
            isdis:true,
            isshow:1,
            time:"",
        }
    },
    methods:{
        isdisplay(){
            // this.isdisplay=true
            setTimeout(()=> {
             this.introduce="这是"
             this.filt=1
             this.isdis=false
            },1000);
            setTimeout(()=> {
             this.introduce="这是我的"
             this.filt=2
            },1100);
            setTimeout(()=> {
             this.introduce="这是我的个人"
             this.filt=3
            },1200);
            setTimeout(()=> {
                this.introduce="这是我的个人博客"
                this.filt=4
            },1300);
            setTimeout(()=> {
                this.introduce="这是我的个人博客，欢迎"
                this.filt=5
            },1400);
            setTimeout(()=> {
                this.introduce="这是我的个人博客，欢迎光临"
                this.filt=6
                // this.isdis=false
            },1500);

        },
        // 动画函数
        isstart(){
            gsap.registerPlugin(ScrollTrigger)
             ScrollTrigger.create({
             trigger:'.box',
              start:'top top',
              end:'+=1500',
              scrub:true,
             // pin:true,
            //  markers:true,
             animation:gsap.timeline()
             .to('.box',{y:300,scale:1.0,},'<')
             })
        }
        
    },
    mounted(){
        this.isdisplay(),
        this.isstart()
    },

}
</script>
<template>
    <div class="box">
        <div class="box_body ">
            <div class="one" >欢迎光临</div>
            <p >{{ this.introduce }}</p>
        </div>
        <div class="m"></div>
    </div>
</template>
<style lang="less" scoped>
.box{
    position: relative;
    background-image: url('../assets/1.jpg');
    // background: rgba(0, 0, 0, 0.9);
    background-position: 0px -229px;
    background-repeat:no-repeat;
    height: 775.2px;
    // background-color: #140e0e;
    .box_body{
        width: 45%;
        height: 45%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        // align-self: center;
        // background-color: #fff;
        div{
            font-size: 130px;
            font-family: "Helvetica Neue", "Arial", sans-serif;
            font-style: italic;
            font-weight: 100;
            color: rgb(23, 23, 23);
            // color:rgb(31, 185, 51);
            font-variant-ligatures: normal;
            // opacity: 0.7;
            // 彩色文字
            background-image: linear-gradient(to top, #268c95, #2f43c9); 
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        p{
            font-size: 20px;
            // opacity: 0.1;
            font-family: "Helvetica Neue", "Arial", sans-serif;
            font-style: italic;
            color: white;
            // color:rgb(31, 185, 51);
            font-variant-ligatures: normal;
            background-image: linear-gradient(to right, #6852e3, #ed4d1c); 
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
    .m{
        width: 100%;
        height: 100%;
        backdrop-filter: blur(9px);
        // filter: blur(8px);
        // background-color: #fff;
    }
}
</style>